<template>
	<div class="page pageFixed">
		<custom-box vip customback title="输入学号" @back="back">
			<div class="grade_box">
				<div class="grade_icon"></div>
				<div class="grade_include flex">
					<div class="item" v-for="i in 6"></div>
					<div class="grade_include_container flex">
						<div class="n_item" v-for="item in include">{{item}}</div>
					</div>
				</div>
				
				<div class="grade_keyboard flex wrap">
					<div class="item" v-for="item in keyboardList" :key="item" @click="addNumber(item)">{{item}}</div>
					<div class="item del" @click="delNumber()">删除</div>
				</div>
				<div class="button grade_submit" @click="next">确认</div>
			</div>
		</custom-box>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
	data(){
		return {
			include:[1, 2, 3, 4, 5, 6],
			keyboardList:[0,1, 2, 3, 4, 5,6,7,8,9]
		}
	},
	computed: {
		...mapState({
			studentNumber: state => state.integration.studentNumber,
		})
	},
	methods:{
		...mapMutations([
      'getStudentNumber', // 拿到学号
    ]),
		back(){
			this.$emit('back')
		},
		next(){
			if(this.include.length !== 6) {
				uni.showToast({
					title: `请输入正确的学号`,
					icon: 'none',
					duration: 2000
				}) 
				return;
			}
			// console.log('输入：', this.include.join('')) // 拿到直接发送请求
			// console.log('---', getApp().globalData )
			// console.log('bao_1',  this.$store.state.bao)
			// console.log('积分模块', this.nameA )
			this.getStudentNumber(this.include.join(''))
			this.$emit('next')
		},
		addNumber(n){
			if(this.include.length<6){
				this.include.push(n)
			}
			
		},
		delNumber(){
			this.include.pop()
		}
	},
	mounted() {
		
	}
}
</script>
<style scoped lang="scss">
	.n_item{
		width: .96rem; height: .97rem; margin: 0px .2rem; text-align: center; line-height: .97rem; color: #fff; font-size: .46rem;
	}
	.grade_box{width: 100%; height: 100%; position: relative;}
	.grade_icon{
		width: 2.75rem;
		height: 3.54rem;
		background: url('../../assets/img/gradeIcon.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left:-0.5rem;
		bottom: 0;
	}
	.grade_include{
		margin-top: .5rem; height: .97rem; position: relative; margin-left: 0.3rem;		
		.item{@extend .n_item; background: url('../../assets/img/code1.png'); background-size: 100% 100%;}
		.grade_include_container{
			position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;
		}
	}
	.grade_keyboard{
		width: 6rem; margin-left: 2.5rem; margin-top: .5rem;
		.item{width: 1.28rem; height: .81rem; line-height: .7rem; background: url('../../assets/img/code.png');  background-size: 100% 100%; color: #974102; font-size: .42rem; text-align: center; margin-left: 0.2rem; margin-top: .18rem;}
		.item.del{background: url('../../assets/img/code2.png');  background-size: 100% 100%; color:#fff;}
	}
	.grade_submit{position: absolute; left: 50%; transform: translateX(-50%); bottom: -.2rem;}
</style>